<template>
	<view>
		<view style="height: 20rpx;"></view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">



			<block v-for="(item,index) in list" :key="index">
				<view class="list-public" @click="getSel(item.id)">
					<view class="display-a margin-bottom_10rpx">
						<image class="matrix-15" :src="isSel.indexOf(item.id) != -1 ? matrix16 : matrix15"></image>
						<image v-if="item.avatar" class="head" :src="'https://images.weserv.nl/?url='+item.avatar"></image>
						<image v-else class="head" :src="severAvatar"></image>
						<!-- 	<view style="width: 384rpx;" v-if="obj.selLabel==2">
							<view class="font-size_30rpx margin-bottom_10rpx">{{item.nickname}}</view>
							<view class="color_999999 font-size_24rpx">到期时间: {{item.type == 1 ? date(item.createTime,item.expiresIn) : date(item.createTime,item.expiresIn)}}</view>
						</view> -->


						<view style="width: 384rpx;">
							<view class="font-size_30rpx margin-bottom_10rpx">
								{{obj.selLabel == 7 ? item.accountName : item.nickname}}
							</view>
							<view class="color_999999 font-size_24rpx">到期时间: {{date(item.create_time,item.expires_in)}}
							</view>
						</view>


						<view class="empower" :style="isEmpower(item) ? '' : 'background: #F00;'"
							v-if="(obj.selLabel != 6)&&(obj.selLabel != 2)">
							{{isEmpower(item) ? '授权中' : '已失效'}}
						</view>

					</view>
					<view class="display-a">
						<view style="width: 156rpx;"></view>
						<view :class="item.group_name ? 'color_1E6CEB' : 'color_999999'">所在分组:
							{{item.group_name?item.group_name:'--'}}
						</view>
					</view>
				</view>
			</block>
		</mescroll-body>

		<view style="height: 210rpx;"></view>

		<view class="list-bott">
			<view class="display-a margin-bottom_30rpx">
				<image class="matrix-15" @click="getAllSel()" :src="allSel ? matrix16 : matrix15"></image>
				<view class="color_1E6CEB" @click="getAllSel()">全选({{count+'/'+total}})</view>
				<view class="color_FF0000 margin-left-auto" @click="getDel()">删除</view>
			</view>
			<block v-if="isSel.length > 0">
				<picker mode="selector" @change="bindPickerChange3" :range="groupList" :range-key="'name'">
					<view class="bott-but">去选择分组</view>
				</picker>
			</block>
			<block v-else>
				<view class="bott-but" @click="getTips()">去选择分组</view>
			</block>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				matrixAvatar: this.$imgs.avatar,
				matrix15: this.$imgs.matrix15,
				matrix16: this.$imgs.matrix16,
				// 下拉配置项
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},

				list: [],

				windowHeight: '',

				obj: {
					name: '',
					selLabel: '', //1抖音h5发布 3矩阵首页待用户发布查询 4矩阵首页快手发布 5.B站
					statusId: '',
				},

				isSel: [],
				allSel: false,
				groupArr: [], //选中的换分组数据

				groupList: [],

				total: 0, //总条数
				count: 0, //当前页条数
				selLabel: 1,
				severAvatar:this.$imgs.severAvatar,
				arr:[]
			}
		},

		computed: {
			// 是否已授权
			isEmpower() {
				return function(row) { //使用函数返回
					let isEmpower = false;
					// true,已授权 ,为false，则为已失效
					// row.type  1D音2K手
					isEmpower = this.selLabel == 7 ? new Date(this.msToDate(new Date()).hasTime.replace(/-/g,
						"\/")) < new Date(row.expirationDate) : (Math.floor(Math.floor(Date.now() / 1000)) < row
						.expires_in)
					return isEmpower;
				}
			},


		},

		onLoad(options) {
			//获取系统信息
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight * 2 - 24;
				}
			})
			this.obj = JSON.parse(options.obj);
			console.log(this.obj)
			this.selLabel = this.obj.selLabel
			if (this.obj.selLabel) {
				this.getGroup();
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			}

		},

		onShow() {

		},

		methods: {

			//分组
			async getGroup() {
				const result = await this.$http.post({
					url: this.$api.groupList,
					data: {
						uid: uni.getStorageSync("uid"),

						type: this.selLabel

					}
				});
				if (result.errno == 0) {
					this.groupList = result.data;
				}
			},



			getTips() {
				
				if (this.isSel.length == 0) {
					this.$sun.toast("请先选择账号", 'none');
					return;
				}
			},

			/*  删除  */
			getDel() {

				if (this.isSel.length == 0) {
					this.$sun.toast("请先选择账号", 'none');
					return;
				}
                console.log(this.isSel)
				uni.showModal({
					title: '提示',
					content: '确认删除这' + this.isSel.length + '条账号?',
					success: async (res) => {
						if (res.confirm) {
							const result = await this.$http.post({
								url: this.$api.userDel,
								data: {
									uid: uni.getStorageSync("uid"),
									user_id:  this.isSel.length == 1 ? this.isSel[0] :  this.isSel.join(',') ,
								}
							});
							if (result.errno == 0) {
								this.$sun.toast(result.message);
								setTimeout(() => {
									this.$nextTick(() => {
										this.mescroll.resetUpScroll();
									});
								}, 2000);
							} else {
								this.$sun.toast(result.message, 'none');
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			//全选
			getAllSel() {

				this.allSel = !this.allSel;

				this.isSel = [];

				if (this.allSel) {
					for (let i = 0; i < this.list.length; i++) {
						this.isSel.push(this.list[i].id);
					}
				}

			},

			//选中
			getSel(id) {
				let isBoo = this.isSel.indexOf(id);
				if (isBoo == -1) {
					this.isSel.push(id);
					if (Number(this.total == this.isSel.length)) {
						this.allSel = true;
					}
				} else {
					this.isSel.splice(isBoo, 1);
					this.allSel = false;
				}
				this.count = this.isSel.length
			},

			//账号状态
			bindPickerChange3(e) {

				if(this.isSel.length>0){
					let group_id = this.groupList[e.detail.value].id;
					 this.arr = [];
					for (let i = 0; i < this.isSel.length; i++) {
					
						 this.arr.push(this.isSel[i]);
					}
					this.groupArr =  this.arr.length == 1 ?  this.arr[0] :  this.arr.join(',');
					console.log(group_id, this.groupArr)
					this.updataGroup(group_id,this.groupArr);
				}else{
					this.$sun.toast('请选择账号','none')
				}
				
			},

			//换分组
			async updataGroup(group_id, user_id) {
				const result = await this.$http.post({
					url: this.$api.userChange,
					data: {
						target_id: group_id,
						user_id: user_id,
						uid: uni.getStorageSync("uid"),
					}
				});
				if (result.errno == 0) {
					this.$sun.toast(result.message);
					setTimeout(() => {
						this.$nextTick(() => {
							this.mescroll.resetUpScroll();
						});
					}, 2000);
				} else {
					this.$sun.toast(result.message, 'none');
				}
			},



			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.userPage,
					data: {
						uid: uni.getStorageSync("uid"),


						type: this.obj.selLabel,
						page: scroll.num,
						limit: 10


						// day: this.yeartime + '-' + this.monthtime + '-' + this.dayTime,

					}
				});
				if (result.errno == 0) {

					this.total = result.data.total;
					// let numberCount = scroll.num * 10;
					// if (Number(numberCount) > Number(this.total)) {
					// 	numberCount = this.total;
					// }
					// this.count = numberCount;

					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
				}
			},

			// date:创建日期 time：授权过期时间（需加）
			// date:创建日期 time：授权过期时间（需加）
			date(date, addTime) {
				console.log(date, addTime)
				// 日期或中国标准时间转毫秒数：
				let result = new Date(addTime * 1000);
				let allDate = null;
				if (this.selLabel == 5) {
					allDate = result + addTime;
				} else {
					allDate = result; // 按秒计算，所以需要*1000（原始毫秒）
				}
				// 预计到期时间计算
				let endtime = this.msToDate(allDate).hasTime
				// 去除秒数截取最后：的前面数字
				let index = endtime.lastIndexOf(":")
				endtime = endtime.substring(0, index);
				return endtime
			},
			// 毫秒数或中国标准时间转日期
			msToDate(msec) {
				let datetime = new Date(msec);
				let year = datetime.getFullYear();
				let month = datetime.getMonth();
				let date = datetime.getDate();
				let hour = datetime.getHours();
				let minute = datetime.getMinutes();
				let second = datetime.getSeconds();
				let result1 = year +
					'-' +
					((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
					'-' +
					((date + 1) < 10 ? '0' + date : date) +
					' ' +
					((hour + 1) < 10 ? '0' + hour : hour) +
					':' +
					((minute + 1) < 10 ? '0' + minute : minute) +
					':' +
					((second + 1) < 10 ? '0' + second : second);

				let result2 = year +
					'-' +
					((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
					'-' +
					((date + 1) < 10 ? '0' + date : date);

				let result = {
					hasTime: result1,
					withoutTime: result2
				};

				return result;
			},

		}
	}
</script>

<style lang="scss">
	.bott-but {
		width: 690rpx;
		padding: 24rpx;
		background-color: #0E8FF3;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
	}

	.list-bott {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		z-index: 555;
	}

	.matrix-15 {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.color_1E6CEB {
		color: #1E6CEB;
	}

	.empower {
		background-color: #00D060;
		width: 96rpx;
		text-align: center;
		border-radius: 10rpx;
		padding: 8rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-left: auto;
	}

	.head {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
</style>